<template>
  <transition name="loading-fade">
    <div v-if="isLoading" class="loading-overlay">
      <div v-if="backgroundImage" class="loading-bg" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></div>
      <div class="loading-container">
        <!-- 山水水墨风动画（内联SVG + CSS 动画） -->
        <div class="loading-animation">
          <div class="shanshui-wrapper">
            <svg class="shanshui-canvas" viewBox="0 0 240 140" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <defs>
                <!-- 水墨晕染效果 -->
                <filter id="ink-blur" x="-30%" y="-30%" width="160%" height="160%">
                  <feGaussianBlur in="SourceGraphic" stdDeviation="0.4"/>
                </filter>
                <linearGradient id="mountain-grad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stop-color="#22d3ee" stop-opacity="0.42"/>
                  <stop offset="60%" stop-color="#0ea5e9" stop-opacity="0.24"/>
                  <stop offset="100%" stop-color="#22c55e" stop-opacity="0.12"/>
                </linearGradient>
                <linearGradient id="mist-grad" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%" stop-color="#a5f3fc" stop-opacity="0"/>
                  <stop offset="50%" stop-color="#99f6e4" stop-opacity="0.18"/>
                  <stop offset="100%" stop-color="#a5f3fc" stop-opacity="0"/>
                </linearGradient>
                <!-- 纸张纹理（轻微） -->
                <filter id="paper-texture">
                  <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch" result="noise"/>
                  <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -0.8 1" in="noise" result="paper"/>
                  <feBlend in="SourceGraphic" in2="paper" mode="multiply"/>
                </filter>
              </defs>

              <!-- 渐变天空 + 纸纹理叠加 -->
              <rect x="0" y="0" width="240" height="140" fill="url(#mist-grad)" opacity="0.16"/>
              <rect x="0" y="0" width="240" height="140" fill="#ffffff" opacity="0.06" filter="url(#paper-texture)"/>

              <!-- 远山层（多峰） -->
              <g class="mountain layer-back" filter="url(#ink-blur)">
                <path d="M0 92 C 30 70, 55 78, 86 66 C 108 58, 135 68, 160 60 C 188 52, 214 64, 240 56 L 240 140 L 0 140 Z" fill="url(#mountain-grad)" stroke="#0ea5e9" stroke-opacity="0.24" stroke-width="0.7"/>
              </g>
              <!-- 中景山 -->
              <g class="mountain layer-mid" filter="url(#ink-blur)">
                <path d="M0 100 C 22 88, 58 86, 96 82 C 136 78, 178 86, 240 80 L 240 140 L 0 140 Z" fill="url(#mountain-grad)" opacity="0.84" stroke="#22c55e" stroke-opacity="0.26" stroke-width="0.9"/>
              </g>
              <!-- 近景山（清晰） -->
              <g class="mountain layer-front" filter="url(#ink-blur)">
                <path d="M0 108 C 32 98, 74 96, 120 92 C 164 88, 204 98, 240 94 L 240 140 L 0 140 Z" fill="url(#mountain-grad)" opacity="0.92" stroke="#0ea5e9" stroke-opacity="0.34" stroke-width="1.1"/>
              </g>

              <!-- 河流（漫流线） -->
              <path class="river" d="M12 118 C 46 116, 72 114, 100 112 C 130 110, 162 112, 188 114 C 210 116, 224 118, 236 120" fill="none" stroke="#38bdf8" stroke-opacity="0.6" stroke-width="1.2"/>

              <!-- 流动云雾 -->
              <g class="mists">
                <rect class="mist mist-1" x="-240" y="36" width="240" height="18" fill="url(#mist-grad)"/>
                <rect class="mist mist-2" x="0" y="58" width="240" height="20" fill="url(#mist-grad)"/>
                <rect class="mist mist-3" x="-240" y="76" width="240" height="16" fill="url(#mist-grad)"/>
              </g>

              <!-- 小舟（轻轻晃动） -->
              <g class="boat" transform="translate(60, 100)">
                <path d="M-18 0 C -6 6, 6 6, 18 0 L 16 0 C 4 4, -4 4, -16 0 Z" fill="#92400e" fill-opacity="0.7"/>
                <rect x="-1.2" y="-14" width="2.4" height="14" fill="#1f2937" fill-opacity="0.8"/>
                <path d="M0 -14 L 10 -4 L 0 -4 Z" fill="#737373" fill-opacity="0.7"/>
              </g>

              <!-- 仙鹤（展翼飞行） -->
              <g class="cranes">
                <g class="crane c1" transform="translate(168,36)">
                  <ellipse cx="0" cy="0" rx="3.2" ry="1.6" fill="#000" fill-opacity="0.7"/>
                  <path class="wing wing-left" d="M0 0 C -8 -2, -14 -4, -18 -6" fill="none" stroke="#000" stroke-width="1" stroke-opacity="0.8" stroke-linecap="round"/>
                  <path class="wing wing-right" d="M0 0 C 8 -2, 14 -4, 18 -6" fill="none" stroke="#000" stroke-width="1" stroke-opacity="0.8" stroke-linecap="round"/>
                  <path d="M3 0 L 7 1" stroke="#000" stroke-width="0.8" stroke-opacity="0.9" stroke-linecap="round"/>
                </g>
                <g class="crane c2" transform="translate(196,28) scale(0.85)">
                  <ellipse cx="0" cy="0" rx="3.2" ry="1.6" fill="#000" fill-opacity="0.7"/>
                  <path class="wing wing-left" d="M0 0 C -8 -2, -14 -4, -18 -6" fill="none" stroke="#000" stroke-width="1" stroke-opacity="0.8" stroke-linecap="round"/>
                  <path class="wing wing-right" d="M0 0 C 8 -2, 14 -4, 18 -6" fill="none" stroke="#000" stroke-width="1" stroke-opacity="0.8" stroke-linecap="round"/>
                  <path d="M3 0 L 7 1" stroke="#000" stroke-width="0.8" stroke-opacity="0.9" stroke-linecap="round"/>
                </g>
              </g>

              <!-- 水面涟漪 -->
              <g class="ripples">
                <ellipse class="ripple r1" cx="160" cy="108" rx="14" ry="3.2" fill="#38bdf8" fill-opacity="0.3"/>
                <ellipse class="ripple r2" cx="160" cy="108" rx="22" ry="4.6" fill="#38bdf8" fill-opacity="0.22"/>
                <ellipse class="ripple r3" cx="160" cy="108" rx="30" ry="6.2" fill="#38bdf8" fill-opacity="0.14"/>
              </g>
            </svg>
          </div>
          <div class="loading-text">{{ loadingText }}</div>
        </div>
        
        <!-- 进度条 -->
        <div class="progress-container">
          <div class="progress-bar">
            <div 
              class="progress-fill" 
              :style="{ width: progress + '%' }"
            ></div>
          </div>
          <div class="progress-text">{{ Math.round(progress) }}%</div>
        </div>
        
        <!-- 完成时的庆祝动画 -->
        <div v-if="progress >= 100" class="celebration">
          <div class="sparkle sparkle-1">✨</div>
          <div class="sparkle sparkle-2">🎉</div>
          <div class="sparkle sparkle-3">✨</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'LoadingProgress',
  props: {
    isLoading: {
      type: Boolean,
      default: false
    },
    progress: {
      type: Number,
      default: 0
    },
    loadingText: {
      type: String,
      default: '正在加载您的名片...'
    },
    backgroundImage: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(221, 221, 221, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(6px);
}

.loading-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  z-index: -1;
}

.loading-container {
  text-align: center;
  color: #ffffff;
  padding: 2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  min-width: 300px;
  filter: none;
}

.loading-animation { margin-bottom: 0.75rem; }

/* 山水动画元素 */
.shanshui-wrapper { position: relative; width: 240px; height: 140px; margin: 0 auto 12px; }
.shanshui-canvas { width: 240px; height: 140px; display: block; }

/* 云雾左右流动 */
.mist { animation: mist-move 6s linear infinite; }
.mist-1 { animation-duration: 10s; opacity: .45; }
.mist-2 { animation-duration: 8s; opacity: .35; }
.mist-3 { animation-duration: 12s; opacity: .3; }
@keyframes mist-move { 0%{ transform: translateX(0) } 100%{ transform: translateX(240px) } }

/* 山体缓慢呼吸般起伏（微缩放） */
.mountain { transform-origin: center; animation: mountain-breathe 7s ease-in-out infinite; }
.layer-back { animation-delay: .6s; }
.layer-mid { animation-delay: .2s; }
.layer-front { animation-delay: 0s; }
@keyframes mountain-breathe { 0%,100%{ transform: scale(1)} 50%{ transform: scale(1.01)} }

/* 小舟轻轻起伏&微摆 */
.boat { transform-origin: 60px 100px; animation: boat-float 3.2s ease-in-out infinite; }
@keyframes boat-float { 0%,100%{ transform: translate(60px, 100px) rotate(-0.6deg) } 50%{ transform: translate(60px, 98px) rotate(0.6deg) } }

/* 水面同心涟漪 */
.ripple { transform-origin: 160px 108px; animation: ripple-expand 2.8s ease-out infinite; }
.r2 { animation-delay: .4s; }
.r3 { animation-delay: .8s; }
@keyframes ripple-expand { 0%{ transform: scale(.92); opacity:.18 } 70%{ transform: scale(1.06); opacity:.08 } 100%{ transform: scale(1.12); opacity:0 } }

/* 河流缓慢流动的高光 */
.river { stroke-dasharray: 6 6; animation: river-glint 3.6s linear infinite; }
@keyframes river-glint { 0%{ stroke-dashoffset: 0 } 100%{ stroke-dashoffset: -36 } }

/* 仙鹤振翼动画 */
.cranes .wing { transform-origin: 0 0; animation: wing-flap 1.6s ease-in-out infinite; }
.cranes .c2 .wing { animation-delay: .2s; }
@keyframes wing-flap { 0%,100%{ transform: rotate(-6deg) } 50%{ transform: rotate(8deg) } }

.loading-text {
  font-size: 1.05rem;
  font-weight: 500;
  opacity: 0.9;
  text-shadow: 0 1px 1px rgba(255,255,255,.6);
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.progress-container {
  width: 100%;
  margin-top: 0.5rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #909090 0%, #bdbdbd 60%, #e5e5e5 100%);
  border-radius: 10px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.progress-text {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.85;
}

/* 庆祝动画 */
.celebration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sparkle {
  position: absolute;
  font-size: 2rem;
  animation: sparkle-bounce 1s ease-in-out infinite;
}

.sparkle-1 {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.sparkle-2 {
  top: 30%;
  right: 20%;
  animation-delay: 0.3s;
}

.sparkle-3 {
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.6s;
}

@keyframes sparkle-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
}

/* 淡入淡出动画 */
.loading-fade-enter-active, .loading-fade-leave-active {
  transition: opacity 0.5s ease;
}

.loading-fade-enter, .loading-fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .loading-container {
    margin: 1rem;
    padding: 1.5rem;
    min-width: auto;
  }
  
  .loading-text {
    font-size: 1rem;
  }
  
  .sparkle {
    font-size: 1.5rem;
  }
}
</style>
